﻿/// <reference path="../Core.ts" />

module Supernova {

    export class ServerSelectionUI implements UI.ISwitchableUI {

        layout = {
            rootPanel: {
                top: 50, width: 600, bottom: 50,
                controls: {
                    welcomeTitle: {
                        top: 0, height: 30,
                        text: 'Supernova Server Selection'
                    },
                    selectServerLabel: {
                        top: 40, height: 20,
                        text: 'Select a server:'
                    },
                    serversPanel: {
                        left: 0, right: 0, top: 70, bottom: 32
                    },
                    backButton: {
                        left: 0, width: 100, bottom: 32, height: 32,
                        text: 'Back',
                        onClick: this.handleBackButtonClicked
                    },
                    hostButton: {
                        left: 110, right: 0, bottom: 32, height: 32,
                        text: 'Host your own server',
                        onClick: this.handleHostButtonClicked
                    }
                }
            }
        }

        public root: UI.UIControl = null;

        constructor() {
            this.root = UI.compile(this.layout)[0];
        }

        show() {
            this.getServers(this.receiveServers);
        }

        hide() {
        }

        private getServers(callback: (entries: any) => void) {
            var httpRequest = new XMLHttpRequest();
            httpRequest.onreadystatechange = function () {
                if (httpRequest.readyState === XMLHttpRequest.DONE) {
                    if (httpRequest.status === 200) {
                        var entries = JSON.parse(httpRequest.responseText);
                        callback(entries);
                    } else {
                        callback([]);
                    }
                }
            };
            try {
                httpRequest.open('GET', 'servers.json');
                httpRequest.send();
            }
            catch (message) {
                if (TEST_MODE) {
                    channel.connect('ws://127.0.0.1:20020/nova2', SERVER_PROTOCOL);
                } else {
                    callback([]);
                }
            }
        }

        private receiveServers(entries: any) {

            // Are there any servers?
            var panel = UI.getControlByName(serverSelectionUI.root, 'serversPanel');
            panel.controls = [];
            if (entries.length == 0) {
                panel.controls.push(new UI.Label({ left: 0, top: 0, right: 0, height: 32, text: 'All Supernova multiplayer servers are currently offline.' }));
            }

            // Show servers
            for (var i = 0; i < entries.length; i++) {
                var entry = entries[i];
                var button = new UI.Button({ left: 0, top: i * 50, width: 100, height: 40, text: 'Connect', tag: entry.address });
                button.onClick = serverSelectionUI.handleConnectButtonClick;
                var title = new UI.Title({ left: 110, top: i * 50, right: 0, height: 20, text: entry.name });
                var label = new UI.Label({ left: 110, top: i * 50 + 20, right: 0, height: 20, text: entry.address });
                panel.controls.push(button, title, label);
            }
            UI.compute(serverSelectionUI.root, UI.Bounds.create(canvas));
        }

        private handleBackButtonClicked(sender, e) {
            UI.swap(mainMenuUI, UI.Bounds.create(canvas));
        }

        private handleHostButtonClicked(sender, e) {
            window.open('host.html', '_blank');
        }

        private handleConnectButtonClick(sender, e) {
            var button = <UI.Button>sender;
            channel.connect(<string>button.tag, SERVER_PROTOCOL);
        }

    }

}